<template>
  <div class="searchForm" @keypress="keypress">
    <div class="labelBox">
      <div class="label" v-if="keys.includes('title')">
        <span class="name">标题：</span>
        <el-input v-model="form.title" placeholder="请输入标题" size="small"></el-input>
      </div>
      <div class="label" v-if="keys.includes('name')">
        <span class="name">姓名：</span>
        <el-input v-model="form.name" placeholder="请输入姓名" size="small"></el-input>
      </div>
      <div class="label" v-if="keys.includes('username')">
        <span class="name">用户名：</span>
        <el-input v-model="form.username" placeholder="请输入用户名" size="small"></el-input>
      </div>
      <div class="label" v-if="keys.includes('dicValue')">
        <span class="name">编码：</span>
        <el-input v-model="form.dicValue" placeholder="请输入编码" size="small"></el-input>
      </div>
      <div class="label" v-if="keys.includes('dicDisplay')">
        <span class="name">名称：</span>
        <el-input v-model="form.dicDisplay" placeholder="请输入名称" size="small"></el-input>
      </div>
      <div class="label" v-if="keys.includes('userName')">
        <span class="name">操作人：</span>
        <el-input v-model="form.userName" placeholder="请输入操作人姓名" size="small"></el-input>
      </div>

      <div class="label" v-if="keys.includes('honorTime')">
        <span class="name">获奖时间：</span>
             <el-date-picker
                     v-model="form.honorTime"
                     type="date"
                     value-format="timestamp"
                     class="input"
                     size="small"

                     placeholder="选择日期">
             </el-date-picker>
      </div>
      <div class="label" v-if="keys.includes('birthday')">
        <span class="name">出生年月：</span>
        <el-date-picker
                v-model="form.birthday"
                type="date"
                value-format="timestamp"
                class="input"
                size="small"

                placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="label" v-if="keys.includes('dicRegion')">
        <span class="name">所属街道：</span>
        <!--        <el-input v-model="form.dicRegion" placeholder="请输入姓名" size="small"></el-input>-->
        <el-select v-model="form.dicRegion" placeholder="请选择" size="small" :clearable="true">
          <el-option
              v-for="item in dicRegion"
              :key="item.dicValue"
              :label="item.dicDisplay"
              :value="item.dicValue">
          </el-option>
        </el-select>
      </div>
      <div class="label" v-if="keys.includes('dicPerType')">
        <span class="name">人员类型：</span>
        <!--        <el-input v-model="form.dicRegion" placeholder="请输入姓名" size="small"></el-input>-->
        <el-select v-model="form.dicPerType" placeholder="请选择" size="small" :clearable="true">
          <el-option
                  v-for="item in dicTypeList"
                  :key="item.dicValue"
                  :label="item.dicDisplay"
                  :value="item.dicValue">
          </el-option>
        </el-select>
      </div>
      <div class="label" v-if="keys.includes('tel')">
        <span class="name">手机号码：</span>
        <el-input v-model="form.tel" placeholder="请输入手机号码" size="small"></el-input>
      </div>
      <div class="label" v-if="keys.includes('trainName')">
        <span class="name">培训名称：</span>
        <el-input v-model="form.trainName" placeholder="请输入培训名称" size="small"></el-input>
      </div>
<!--      <div class="label" v-if="keys.includes('name')">-->
<!--        <span class="name">区域：</span>-->
<!--        <el-select v-model="form.name" placeholder="请选择" size="small">-->
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </div>-->
      <!--      <div class="label" v-if="keys.includes('name')">-->
      <!--        <span class="name">区域：</span>-->
      <!--        <el-select v-model="form.name" placeholder="请选择" size="small">-->
      <!--          <el-option-->
      <!--              v-for="item in options"-->
      <!--              :key="item.value"-->
      <!--              :label="item.label"-->
      <!--              :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
      <div class="btn-box">
        <el-button type="primary" icon="el-icon-search" size="small" @click="$emit('on-search')">查询</el-button>
      </div>
    </div>

    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "searchForm",
  props: {
    keys: {
      default: () => []
    }
  },
  mounted() {
    if (this.keys.includes('dicRegion')) {
      this.$api.getDicTree({id: 22}).then(res=>{
        console.log(res)
        this.dicRegion = res.data[0].childDicTreeVOS
      })
    }
    if(this.keys.includes('dicPerType')){
      this.$api.getDicTree({
        id:1
      }).then(res => {
        this.dicTypeList = res.data[0].childDicTreeVOS
      })
    }
  },
  methods: {
    keypress() {
      this.$emit('on-search')
    },
  },
  data() {
    return {
      form: {
        name: '',
        userName: '',
        dicDisplay: '',
        dicValue: '',
        username: '',
        dicRegion: '',
        title: '',
        trainName:'',
        dicPerType:'',
      },
      dicRegion: [],
      dicTypeList:[],
    }
  },
}
</script>

<style scoped lang="less">
.searchForm {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  align-items: center;
  flex-wrap: wrap;

  .labelBox {
    display: flex;
  }

  .label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    margin-right: 10px;

    .name {
      width: 80px;
      text-align: right;
      font-size: 12px;
      color: #666666;
    }
  }

  .btn-box {
    margin-left: 10px;
    margin-bottom: 10px;
  }
}
</style>
